import { React, useEffect, useState } from 'react'
import './index.scss'
import back from '@/assets/back2.jpg'
import { useSearchParams, Link, useNavigate } from 'react-router-dom'
import { getArticleById, getChannelAPI } from '@/apis/article'
import { Avatar, Card } from 'antd'
import { HomeOutlined } from '@ant-design/icons';



const Acticle = () => {
  const navigate = useNavigate()
  const [data, setDate] = useState([])
  const [name, setName] = useState()
  const [textContent, setTextContent] = useState('');
  //找到数据
  const [searchParams] = useSearchParams()
  const articleId = searchParams.get('id')

  console.log(articleId);
  function removeHTMLTags(html) {
    const doc = new DOMParser().parseFromString(html, 'text/html');
    return doc.body.textContent || '';
  }
  async function getList() {
    const res = await getChannelAPI()
    const data1 = res.data.channels
    // console.log(data.channel_id);
    if (data.channel_id) {
      const id = data1.find((item) => item.id === data.channel_id);
      if (id) {
        setName(id.name);
      }
    }
    // console.log(id['name']);
  }
  getList()
  useEffect(() => {
    async function getArticleDetail() {
      const res = await getArticleById(articleId)
      const data = res.data
      setDate(data)
      console.log(data);
    }
    const strippedContent = removeHTMLTags(data.content);
    setTextContent(strippedContent);
    if (articleId) {
      getArticleDetail()
    }

  }, [articleId, data.content])
  return (
    <div style={{ backgroundColor: '#f8fafc' }}>
      <div className='back'>
        <img src={back}></img>
        <span className='title'>{data.title}</span>
      </div>
      <div style={{ display: 'flex', flexDirection: 'row', width: '80%', margin: 'auto' }}>
        <div className='box1'>
          <div className='mine'>
            <Avatar size={50} src='https://pic2.zhimg.com/v2-9057db0eaaaf760d1f3bcb451a7c8175_r.jpg' style={{ marginLeft: '15px', marginTop: '15px' }} onClick={() => navigate(`/mine`)}/></div>
          <span style={{ display: 'block', marginLeft: '80px', marginTop: '-45px', fontWeight: '900' }}><Link to={'/mine'}>懒洋洋</Link></span>
          <span style={{ display: 'block', marginLeft: '80px', marginTop: '10px', fontSize: '12px', color: '#848d91' }}>发布于：{data.pub_date}</span>
          <span style={{ display: 'block', marginLeft: '20px', marginTop: '20px', color: '#848d91' }}>#{name}</span>
          <div className='content'>{textContent}</div>
        </div>
        <div className='box2'>
          <Avatar size={70} icon={<HomeOutlined></HomeOutlined> } style={{ marginLeft: '100px', marginTop: '20px' }} onClick={() => navigate(`/`)}/>
          <span style={{ display: 'block', fontSize: '30px', fontWeight: '500', marginLeft: '95px', marginTop: '20px' }} ><Link to={'/'}>xblog</Link></span>
          <Card
            title="分类目录"
            bordered={false}
            style={{
              width: 300,
              marginTop:'30px'
            }}
          >
            
            <p><Link to={'/all/before'}>前端</Link></p>
            <p><Link to={'/all/after'}>后端</Link></p>
            <Link to={'/all/other'}>其他</Link>
          </Card>
        </div>
      </div>


    </div>
  )
}
export default Acticle
